<template>
    <el-dialog :title="title" :visible.sync="editFormVisible">
      <el-form :rules="editFormRules" ref="editForm" :model="editFormData" label-position="left" label-width="70px" style='width: 400px; margin-left:50px;'>
        <el-form-item label="标题" prop="title">
          <el-input v-model="editFormData.title"></el-input>
        </el-form-item>
        <el-form-item label="时间" prop="birthday">
          <el-date-picker v-model="editFormData.birthday" type="datetime" placeholder="请选择时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select class="filter-item" v-model="editFormData.type" placeholder="请选择状态">
            <el-option v-for="item in statusOptions" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入备注" v-model="editFormData.remark">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editFormVisible=false">取消</el-button>
        <el-button type="primary" @click="handleSave">确定</el-button>
      </div>
    </el-dialog>
</template>

<script>
import demoapi from '@/api/demo'

export default {
  data() {
    return {
      title: '',
      editFormData: {
      },
      editFormVisible: false,
      statusOptions: ['published', 'draft', 'deleted'],
      editFormRules: {
        type: [{ required: true, message: 'type is required', trigger: 'change' }],
        birthday: [{ required: true, message: 'timestamp is required', trigger: 'change' }],
        title: [{ required: true, message: 'title is required', trigger: 'blur' }]
      }
    }
  },
  created() {
    // 创建后，重置表单数据
    this.resetEditFormData()
  },
  methods: {
    show(visible = true) {
      this.editFormVisible = visible
    },
    /**
     * 重置表单数据
     */
    resetEditFormData() {
      this.editFormData = {
        id: undefined,
        remark: '',
        birthday: new Date(),
        title: '',
        type: ''
      }
    },
    /**
     * 处理新建
     */
    handleCreate(title = '新建Demo') {
      this.title = title
      this.resetEditFormData()
      // 显示弹框
      this.show()
      this.$nextTick(() => {
        this.$refs['editForm'].clearValidate()
      })
    },
    /**
     * 处理更新
     */
    handleUpdate(id, title = '修改Demo') {
      this.title = title
      // 显示弹框
      this.show()
      demoapi.detailData(id).then(result => {
        if (result.success) {
          this.editFormData = result.data
        } else {
          this.$message.error('请求数据失败')
        }
      })
    },
    /**
     * 保存数据
     */
    handleSave() {
      this.$refs['editForm'].validate((valid) => {
        if (!valid) {
          return
        }
        demoapi.save(this.editFormData).then(result => {
          if (result.success) {
            this.$notify({
              title: '成功',
              message: result.message || '保存成功',
              type: 'success',
              duration: 2000
            })
            this.$emit('success', result)
            this.show(false)
          } else {
            this.$message.success(result.message || '保存失败')
          }
        })
      })
    }
  }
}
</script>
